<!-- 地区销售排行 -->
<template>
  <div class="com-container">

    <div class="com-chart" ref="rankss_ref"></div>
  </div>

</template>

<script>
import { mapState } from 'vuex'
import Rank from '@/assets/static/data/rankss.json'

export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
      startValue: 0, // 区域缩放的起点值
      endValue: 9, // 区域缩放的终点值
      timerId: null // 定时器的标识
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
    clearInterval(this.timerId)
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.rankss_ref, this.theme)
      const initOption = {
        grid: {
          top: '20%',
          left: '2%',
          right: '2%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          show: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: 40
          }
        },
        yAxis: {
          type: 'value',
          interval: 5
        },
        series: [
          {
            type: 'bar'
          }
        ]
      }
      this.chartInstance.setOption(initOption)
      this.chartInstance.on('mouseover', () => {
        clearInterval(this.timerId)
      })

    },
    async getData() {
      // 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表
      const ret = Rank
      this.allData = ret
      // 对allData里面的每一个元素进行排序, 从大到小进行
      this.allData.sort((a, b) => {
        return b.value - a.value
      })
      console.log(this.allData)
      this.updateChart()
    },
    updateChart() {
      let areaArr = []
      let hasArr = []
      let hasnotArr = []
      Rank.map(i => {
        areaArr.push(i.name)
        hasArr.push(i.value)
        hasnotArr.push(i.value * -1)
      })

      // const option = {
      //   color:['#1c2e68','#fba72f'],
      //   tooltip: {
      //       trigger: 'axis',
      //       axisPointer: {
      //           type: 'shadow'
      //       }
      //   },
      //   legend: {
      //       data: [ '未接种', '已接种'],
      //       textStyle:{
      //           color: '#ffffff'//字体颜色
      //       },
      //   },
      //   grid: {
      //       left: '3%',
      //       right: '4%',
      //       bottom: '3%',
      //       containLabel: true
      //   },
      //   xAxis: [
      //       {
      //           type: 'value',
      //           axisLabel: {
      //           show: true,
      //           textStyle: {
      //             color: '#76787b'
      //           }
      //         },
      //       }
      //   ],
      //   yAxis: [
      //       {
      //           type: 'category',
      //           axisTick: {
      //               show: false
      //           },
      //           data: areaArr,
      //           axisLabel: {
      //           show: true,
      //           textStyle: {
      //             color: '#76787b'
      //           }
      //         },
      //       }
      //   ],
      //   series: [
      //       {
      //           name: '已接种',
      //           type: 'bar',
      //           stack: '总量',
      //           label: {
      //               show: true
      //           },
      //           data: hasArr,
      //           itemStyle: {
      //               normal: {
      //                   barBorderRadius: [0,0,0,0]
      //               }
      //           }
      //       },
      //       {
      //           name: '未接种',
      //           type: 'bar',
      //           stack: '总量',
      //           label: {
      //               show: true,
      //               position: 'left'
      //           },
      //           data: hasnotArr
      //       }
      //   ]};
      //   const option = {
      //     color: ['#fe7d00','#fc8d07','#feb72b','#ffd33f','#0d1c61','#2c4183','#6076af','#a9b7dc'],
      //     tooltip: {
      //         trigger: 'axis',
      //         axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      //             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      //         }
      //     },
      //     legend: {
      //         data: ['口蹄1免疫', '口蹄2免疫', '布病免疫', '炭疽免疫', '口蹄1未免疫', '口蹄2未免疫', '布病未免疫', '炭疽未免疫'],
      //         // data: ['免疫', '免疫'],
      //         textStyle:{
      //            fontSize:15,
      //            color:'#848896'
      //        }
      //     },
      //     grid: {
      //         left: '3%',
      //         right: '4%',
      //         bottom: '3%',
      //         containLabel: true
      //     },
      //     xAxis: [
      //         {
      //             type: 'category',
      //             data: areaArr,
      //             axisLabel: {
      //                 textStyle: {
      //                     color: '#848896',//坐标值得具体的颜色

      //                 }
      //             }
      //         }
      //     ],
      //     yAxis: [
      //         {
      //             type: 'value',
      //             axisLabel: {
      //                 textStyle: {
      //                     color: '#848896',//坐标值得具体的颜色

      //                 }
      //             },
      //             splitLine:{
      //               show:false
      //             }
      //         }
      //     ],
      //     series: [
      //         {
      //             name: '口蹄1免疫',
      //             type: 'bar',
      //             data: [32, 33, 30, 33, 30, 30, 30,30, 33, 30, 30, 30]
      //         },
      //         {
      //             name: '口蹄2免疫',
      //             type: 'bar',
      //             stack: '广告',
      //             data: [12, 13, 10, 13, 9, 23, 21,19, 23, 29, 33, 31]
      //         },
      //         {
      //             name: '布病免疫',
      //             type: 'bar',
      //             stack: '广告',
      //             data: [22, 18, 19, 23, 29, 33, 31,23, 21, 15, 19, 33, 41]
      //         },
      //         {
      //             name: '炭疽免疫',
      //             type: 'bar',
      //             stack: '广告',
      //             data: [15, 23, 21, 15, 19, 33, 41,1, 34, 10, 11, 10]
      //         },
      //         {
      //             name: '口蹄1未免疫',
      //             type: 'bar',
      //             data: [86, 10, 4, 10, 16, 16, 15,2, 7, 74, 10, 30],
      //         },
      //         {
      //             name: '口蹄2未免疫',
      //             type: 'bar',
      //             barWidth: 5,
      //             stack: '搜索引擎',
      //             data: [20, 32, 1, 34, 10, 11, 10,33, 31,23, 21, 15]
      //         },
      //         {
      //             name: '布病未免疫',
      //             type: 'bar',
      //             stack: '搜索引擎',
      //             data: [12, 13, 10, 14, 20, 30, 20,2, 7, 74, 10, 30]
      //         },
      //         {
      //             name: '炭疽未免疫',
      //             type: 'bar',
      //             stack: '搜索引擎',
      //             data: [6, 2, 7, 74, 10, 30, 10,1, 34, 10, 11, 10]
      //         }
      //     ]
      // };
      const option = {
        color: ['#fe7d00', '#fc8d07', '#feb72b', '#ffd33f', '#0d1c61', '#2c4183', '#6076af', '#a9b7dc'],
        xAxis: [
          {
            show: false
          }
        ],
        yAxis: [
          {
            show: false
          }
        ],
        tooltip: {
          trigger: 'item',
          formatter: function(parms) {
            var str = parms.seriesName + '<br/>' +
              parms.data.name + ':' + parms.data.val
            return str
            console.log('parms:{}', parms)
          }
        },
        // legend: {
        //     left: 'center',
        //     top: 'bottom',
        //     data: ['口蹄1免疫', '口蹄2免疫', '布病免疫', '炭疽免疫', '口蹄1未免疫', '口蹄2未免疫', '布病未免疫', '炭疽未免疫']
        // },
        series: [
          {
            name: '凤城镇',
            type: 'pie',
            radius: [30, 60],
            center: ['15.5%', '16%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#848896',
                fontSize: 12,
                formatter: '{a}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 15, name: '口蹄1免疫', val: '98.7%' },
              { value: 15, name: '口蹄2免疫', val: '98.7%' },
              { value: 12, name: '布病免疫', val: '98.7%' },
              { value: 12, name: '炭疽免疫', val: '98.7%' },
              { value: 10, name: '口蹄1未免疫', val: '0%' },
              { value: 5, name: '口蹄2未免疫', val: '0%' },
              { value: 5, name: '布病未免疫', val: '0%' },
              { value: 4, name: '炭疽未免疫', val: '0%' }
            ]
          },
          {
            name: '开栅镇',
            type: 'pie',
            radius: [30, 60],
            center: ['40%', '16%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#848896',
                fontSize: 12,
                formatter: '{a}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 43, name: '口蹄1免疫', val: '98.7%' },
              { value: 23, name: '口蹄2免疫', val: '98.7%' },
              { value: 15, name: '布病免疫', val: '98.7%' },
              { value: 25, name: '炭疽免疫', val: '98.7%' },
              { value: 12, name: '口蹄1未免疫', val: '0%' },
              { value: 43, name: '口蹄2未免疫', val: '0%' },
              { value: 33, name: '布病未免疫', val: '0%' },
              { value: 20, name: '炭疽未免疫', val: '0%' }
            ]
          },
          {
            name: '南庄镇',
            type: 'pie',
            radius: [30, 60],
            center: ['65%', '16%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#848896',
                fontSize: 12,
                formatter: '{a}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 23, name: '口蹄1免疫', val: '98.7%' },
              { value: 15, name: '口蹄2免疫', val: '98.7%' },
              { value: 15, name: '布病免疫', val: '98.7%' },
              { value: 23, name: '炭疽免疫', val: '98.7%' },
              { value: 12, name: '口蹄1未免疫', val: '0%' },
              { value: 35, name: '口蹄2未免疫', val: '0%' },
              { value: 31, name: '布病未免疫', val: '0%' },
              { value: 1, name: '炭疽未免疫', val: '0%' }
            ]
          },
          {
            name: '南安镇',
            type: 'pie',
            radius: [30, 60],
            center: ['90%', '16%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#848896',
                fontSize: 12,
                formatter: '{a}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 10, name: '口蹄1免疫' ,val:'98.7%'},
              { value: 5, name: '口蹄2免疫',val:'98.7%' },
              { value: 15, name: '布病免疫',val:'98.7%' },
              { value: 25, name: '炭疽免疫' ,val:'98.7%'},
              { value: 20, name: '口蹄1未免疫',val:'0%' },
              { value: 35, name: '口蹄2未免疫' ,val:'0%'},
              { value: 30, name: '布病未免疫',val:'0%' },
              { value: 40, name: '炭疽未免疫' ,val:'0%'}
            ]
          },
          {
            name: '刘胡兰镇',
            type: 'pie',
            radius: [30, 60],
            center: ['15.5%', '50%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#848896',
                fontSize: 12,
                formatter: '{a}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 43, name: '口蹄1免疫' ,val:'98.7%'},
              { value: 23, name: '口蹄2免疫' ,val:'98.7%'},
              { value: 15, name: '布病免疫' ,val:'98.7%'},
              { value: 25, name: '炭疽免疫',val:'98.7%' },
              { value: 12, name: '口蹄1未免疫' ,val:'0%'},
              { value: 43, name: '口蹄2未免疫' ,val:'0%'},
              { value: 33, name: '布病未免疫',val:'0%' },
              { value: 20, name: '炭疽未免疫' ,val:'0%'}
            ]
          },
          {
            name: '下曲镇',
            type: 'pie',
            radius: [30, 60],
            center: ['40%', '50%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#848896',
                fontSize: 12,
                formatter: '{a}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 10, name: '口蹄1免疫' ,val:'98.7%'},
              { value: 5, name: '口蹄2免疫',val:'98.7%' },
              { value: 15, name: '布病免疫' ,val:'98.7%'},
              { value: 25, name: '炭疽免疫',val:'98.7%' },
              { value: 20, name: '口蹄1未免疫',val:'0%' },
              { value: 35, name: '口蹄2未免疫' ,val:'0%'},
              { value: 30, name: '布病未免疫' ,val:'0%'},
              { value: 40, name: '炭疽未免疫' ,val:'0%'}
            ]
          },
          {
            name: '孝义镇',
            type: 'pie',
            radius: [30, 60],
            center: ['65%', '50%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#848896',
                fontSize: 12,
                formatter: '{a}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 15, name: '口蹄1免疫',val:'98.7%' },
              { value: 5, name: '口蹄2免疫' ,val:'98.7%'},
              { value: 5, name: '布病免疫',val:'98.7%' },
              { value: 23, name: '炭疽免疫',val:'98.7%' },
              { value: 15, name: '口蹄1未免疫',val:'0%' },
              { value: 32, name: '口蹄2未免疫' ,val:'0%'},
              { value: 22, name: '布病未免疫' ,val:'0%'},
              { value: 4, name: '炭疽未免疫',val:'0%' }
            ]
          },
          {
            name: '南武乡',
            type: 'pie',
            radius: [30, 60],
            center: ['90%', '50%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#848896',
                fontSize: 12,
                formatter: '{a}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 15, name: '口蹄1免疫',val:'98.7%' },
              { value: 25, name: '口蹄2免疫' ,val:'98.7%'},
              { value: 20, name: '布病免疫' ,val:'98.7%'},
              { value: 35, name: '炭疽免疫' ,val:'98.7%'},
              { value: 20, name: '口蹄1未免疫' ,val:'0%'},
              { value: 35, name: '口蹄2未免疫' ,val:'0%'},
              { value: 30, name: '布病未免疫' ,val:'0%'},
              { value: 40, name: '炭疽未免疫',val:'0%' }
            ]
          },
          {
            name: '西城乡',
            type: 'pie',
            radius: [30, 60],
            center: ['15.5%', '84%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#848896',
                fontSize: 12,
                formatter: '{a}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 10, name: '口蹄1免疫',val:'98.7%' },
              { value: 5, name: '口蹄2免疫',val:'98.7%' },
              { value: 15, name: '布病免疫' ,val:'98.7%'},
              { value: 25, name: '炭疽免疫' ,val:'98.7%'},
              { value: 15, name: '口蹄1未免疫' ,val:'0%'},
              { value: 25, name: '口蹄2未免疫' ,val:'0%'},
              { value: 20, name: '布病未免疫' ,val:'0%'},
              { value: 35, name: '炭疽未免疫' ,val:'0%'}
            ]
          },
          {
            name: '北张乡',
            type: 'pie',
            radius: [30, 60],
            center: ['40%', '84%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#848896',
                fontSize: 12,
                formatter: '{a}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 15, name: '口蹄1免疫' ,val:'98.7%'},
              { value: 25, name: '口蹄2免疫' ,val:'98.7%'},
              { value: 20, name: '布病免疫' ,val:'98.7%'},
              { value: 35, name: '炭疽免疫' ,val:'98.7%'},
              { value: 20, name: '口蹄1未免疫' ,val:'0%'},
              { value: 35, name: '口蹄2未免疫' ,val:'0%'},
              { value: 30, name: '布病未免疫',val:'0%' },
              { value: 40, name: '炭疽未免疫',val:'0%' }
            ]
          },
          {
            name: '马西乡',
            type: 'pie',
            radius: [30, 60],
            center: ['65%', '84%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#848896',
                fontSize: 12,
                formatter: '{a}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 10, name: '口蹄1免疫' ,val:'98.7%'},
              { value: 15, name: '口蹄2免疫' ,val:'98.7%'},
              { value: 25, name: '布病免疫' ,val:'98.7%'},
              { value: 20, name: '炭疽免疫' ,val:'98.7%'},
              { value: 35, name: '口蹄1未免疫' ,val:'0%'},
              { value: 35, name: '口蹄2未免疫' ,val:'0%'},
              { value: 30, name: '布病未免疫',val:'0%' },
              { value: 40, name: '炭疽未免疫' ,val:'0%'}
            ]
          },
          {
            name: '西槽头乡',
            type: 'pie',
            radius: [30, 60],
            center: ['90%', '84%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#848896',
                fontSize: 12,
                formatter: '{a}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 10, name: '口蹄1免疫' ,val:'98.7%'},
              { value: 5, name: '口蹄2免疫' ,val:'98.7%'},
              { value: 15, name: '布病免疫' ,val:'98.7%'},
              { value: 25, name: '炭疽免疫' ,val:'98.7%'},
              { value: 15, name: '口蹄1未免疫' ,val:'0%'},
              { value: 25, name: '口蹄2未免疫',val:'0%' },
              { value: 20, name: '布病未免疫' ,val:'0%'},
              { value: 35, name: '炭疽未免疫' ,val:'0%'}
            ]
          }
        ]
      }

      this.chartInstance.setOption(option)
    },
    screenAdapter() {
      const titleFontSize = this.$refs.rankss_ref.offsetWidth / 100 * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        series: [
          {
            barWidth: 8,
            itemStyle: {
              barBorderRadius: [0, 0, 0, 0]
            }
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
